import { resolve } from 'path';

import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import Unocss from 'unocss/vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { defineConfig } from 'vite';
import svgLoader from 'vite-svg-loader';

import configArcoStyleImportPlugin from './plugin/arcoStyleImport';

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    svgLoader({ svgoConfig: {} }), // 加载和处理 SVG 文件
    configArcoStyleImportPlugin(), // 样式按需引入
    Unocss(),
    AutoImport({
      eslintrc: {
        enabled: true, // 是否自动生成 eslint 配置
      },
      imports: [
        'vue', // // 自动导入 Vue 相关 API
        'vue-router', // 自动导入 Vue Router 相关 API
        {
          '@/utils/message': ['MessageInfo'],
        },
        {
          from: '@arco-design/web-vue', // 自动导入 Arco Design Vue 组件
          imports: ['FormInstance', 'TableColumnData', 'Message'],
          type: true, // 表示导入的是类型
        },
        {
          from: '@form-create/arco-design', // 自动导入 FormCreate 组件
          imports: ['FormRule', 'Api'],
          type: true, // 表示导入的是类型
        },
      ],
      vueTemplate: true, // 在 Vue 模板中自动导入
      dts: 'auto-import.d.ts', // 生成类型声明文件
      defaultExportByFilename: false, // 不按文件名作为默认导出
    }),
    Components({
      dirs: ['./src/components'], // 自动导入指定目录下的组件
    }),
  ],
  resolve: {
    alias: [
      // @ 指向 src 目录
      {
        find: '@',
        replacement: resolve(__dirname, '../src'),
      },
      // assets 指向 assets 目录
      {
        find: 'assets',
        replacement: resolve(__dirname, '../src/assets'),
      },
      // 解决 i18n 警告问题
      {
        find: 'vue-i18n',
        replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
      },
      // 支持模板编译
      {
        find: 'vue',
        replacement: 'vue/dist/vue.esm-bundler.js',
      },
    ],
    extensions: ['.ts', '.js'], // 尝试解析的文件扩展名
  },
  define: {
    'process.env': {}, // 定义 process.env 对象
    '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': 'false', // 设为 false 关闭 hydration 不匹配的详细警告
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${resolve(
            'src/assets/style/breakpoint.less'
          )}";`, // 全局引入 less 变量文件
        },
        javascriptEnabled: true, // 允许在 less 中使用 JavaScript 表达式
      },
    },
  },
});
